<template>
    <div class="LW_workOnline_div">
        <div class="LW_workOnline_top" style="background: #059EDF 100%">
            <div class="LW_workOnline_top_ico_div" @click="$router.push('/lineWork')">
                <a-icon type="arrow-left" class="LW_workOnline_top_ico" theme="outlined" />
            </div>
            <div class="LW_workOnline_top_menu">作业进场</div>
        </div>
        <div class="LW_workOnline_content" >
            <a-row type="flex" justify="center" align="middle" >
                <a-col :span="24" >
                    <div class="LW_workInto_circle" @click="sendStep()">进场</div>
                </a-col>
            </a-row>
        </div>
    </div>
</template>
<style >
    .LW_workOnline_div{
        width: 100vw;
    }
    .LW_workOnline_top{
        width: 100vw;
        height: 14vw;
    }
    .LW_workOnline_top_ico_div {
        float: left;
        width: 16vw;
        height: 14vw;
        line-height: 13.75vw;
        margin: 0;
        padding: 0;
        font-size: 4vw;
        text-align: center;
    }
    .LW_workOnline_top_menu{
        width: 84vw;
        height: 14vw;
        line-height: 14vw;
        color: white;
        font-size: 6vw;
        text-align: center;
        generic-family:SourceHanSansSC-regular;
        float: left;

    }

    .LW_workOnline_top_ico{
        font-size: 7vw;
        color: white;
        margin: 3.5vw 0 0 0;

    }
   .LW_workInto_circle{
       width:60vw;
       height: 60vw;
       line-height: 60vw;
       background: #00b7ff 100%;
       -moz-border-radius: 30vw;
       -webkit-border-radius: 30vw;
       border-radius:30vw;
       color: white;
       text-align: center;
       font-weight: normal;
       float: left;
       font-size: 12vw;
       margin: 40vw 20vw 40vw 20vw;

       animation:heartbeat 1s infinite;
       -webkit-animation:heartbeat 1s infinite;
       /* Safari 和 Chrome */
       position:relative;
      /* filter:drop-shadow(0px 0px 20px red);*/
       /*transform:rotate(0deg);*/
   }

    .LW_workInto_circle:before {
        left:-100px;
    }
    .LW_workInto_circle:after {
        left:0;
        top:-100px;
    }
    @keyframes heartbeat {
        0% {
            transform: rotate(0deg) scale(0.8, 0.8);
            opacity: 1;
        }
        25% {
            transform: rotate(0deg) scale(1, 1);
            opacity: 0.8;
        }
        100% {
            transform: rotate(0deg) scale(0.8, 0.8);
            opacity: 1;
        }
    }
</style>
<script>
    import ACol from "ant-design-vue/es/grid/Col";
    import ARow from "ant-design-vue/es/grid/Row";
    export default {
        name: "LineWorkInto",
        components: {ARow, ACol},
        data() {
            return {
                myStep:'4',
                name:'作业进场',
                id:'',
            }
        },
        methods:{
            sendStep(){
                let that = this;
                let methodName = "开始";
                let note = '';
                let currStepInfo = {};
                that.id =that.$route.params.id?that.$route.params.id:JSON.parse(localStorage.getItem("currStepInfo")).id;//路由参数计划编号
                that.$api.step(that.id,that.name,methodName,note).then((resp)=>{
                    if(resp.status === 200){
                        //let otherFailSendInfo = failSendInfo.filter(item=>item.UserId!==UserId);//其余的失败信息集合*/
                        console.log("计划开始成功");

                        currStepInfo.step = that.myStep;
                        currStepInfo.id = that.id;
                        currStepInfo.name = that.name;
                        localStorage.setItem("currStepInfo",JSON.stringify(currStepInfo));

                        that.$router.push({name: 'lineWorkTakePhoto',params: {step: that.myStep,id:that.id,name:that.name}})
                    }
                }).catch((error)=>{
                    alert("计划开始失败");
                    console.log(error);
                })

            },
        },
    }
</script>

